import React, { Component } from 'react'
import { TabBar } from 'antd-mobile'

import './Home.style.scss'

import img_home from 'assets/images/home.png'
import img_home_active from 'assets/images/home-active.png'
import img_find from 'assets/images/find.png'
import img_find_active from 'assets/images/find-active.png'
import img_myself from 'assets/images/myself.png'
import img_myself_active from 'assets/images/myself-active.png'

import Index from './home/Index'
import Find from './home/Find'
import Myself from './home/Myself'
import {BrowserRouter as Router,Redirect,Switch} from 'react-router-dom'

export default class Home extends Component {
    constructor() {
        super();
        this.state = {
            selectedTab: 'index',
            hidden: false,
            fullScreen: false,
            pageList: [{
                id: "index",
                img: img_home,
                imgActive: img_home_active,
                title:'首页',
                component:Index
            }, {
                id: "find",
                img: img_find,
                imgActive: img_find_active,
                title:'发现',
                component:Find
            }, {
                id: "myself",
                img: img_myself,
                imgActive: img_myself_active,
                title:'我的',
                component:Myself
            }]
        };
    }
    render() {
        return (
            <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>

                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#333333"
                    barTintColor="white"
                >
                    {
                        this.state.pageList.map((item) => {
                            return <TabBar.Item
                                title={item.title}
                                key={item.id}
                                icon={<div style={{
                                    width: '22px',
                                    height: '22px',
                                    background: `url(${item.img}`,
                                    backgroundSize:"cover"
                                }}
                                />
                                }
                                selectedIcon={<div className='bgimgs' style={{
                                    width: '22px',
                                    height: '22px',
                                    background: `url(${item.imgActive}`
                                }}
                                />
                                }
                                selected={this.state.selectedTab === item.id}
                                onPress={() => {
                                    this.props.history.push(`/home/${item.id}`)
                                    this.setState({
                                        selectedTab: item.id,
                                    });
                                }}
                            >
                                {
                                    <item.component></item.component>
                                }
                            </TabBar.Item>
                        })
                    }
                </TabBar>
                <Router>
                    <Switch>
                        <Redirect exact from="/home/index/" to="/home/index/recommend"></Redirect>
                    </Switch>
                </Router>
            </div>
        )
    }
}
